iT邦幫忙

2026 iThome 鐵人賽

DAY 2
0
Modern Web

從 UI/UX 設計到前端實作:30 天打造專屬的任務學習計時器系列 第 2 篇

DAY 02|定義MVP產品的核心功能與架構

  • 分享至 

  • xImage
  •  

確立了自身的痛點後,下一步就是進行 MVP(Minimum Viable Product,最小可行性產品) 的功能範疇收斂。為了確保能順利在 30 天內產出,我將核心功能劃分為三大模塊:

1. 核心計時器模塊(Timer)

這是整個應用的核心。為了極簡化操作流程,畫面上方會提供主任務與子任務的快速選單,選好之後只要點擊下方按鈕即可開始計時。

  • 備註欄位(Notes): 結合我自己的實際使用情境,有時候會在學習過程中隨手記錄想法,可能是有哪個觀念不清楚,要再找資料,或是還有哪一部分UI需要做調整。因此我設計了一個彈性的備註欄位,可以在計時前、中、後都能隨時編輯,這些備註也會同步儲存到紀錄中。

2. 任務列表與數據統計(Task List & Analytics)

提供任務管理跟一覽表,並且搭配視覺化進度(progress bar)回饋,增強使用時的成就感:

  • 任務管理: 支援主/子任務的新增、編輯、刪除等功能。
  • 數據統計: 在任務旁顯示統計時數。
  • 視覺化進度條: 依照子任務的完成數量,在主任務欄位顯示進度條,用視覺化方式呈現任務完成度,讓「進度看得見」,進而轉化為持續推進任務的動力。
  • 資料自主權(CSV 匯出): 提供一鍵下載 CSV 檔案功能,讓使用者能自由備份。

3. 常見問題與操作指引(FAQ)

想要保留盡可能簡潔的介面,所以操作介面上不會放太多說明,因此將一些使用者在使用時可能會有的疑問,放在常見問答區域。

[↓資訊架構 v1.1] (2026/9/29更新)

  資訊架構(Information Architecture)
    │
    ├──導覽列
    │   ├── 1. 語系切換
    │   └── 2. 暗色模式切換
    │
    │
  Main Content Area
    │
    ├── Tab-pane 1: 計時器 (Timer)
    │   ├── 1. 任務選擇模組
    │   │   ├── 主任務下拉選單
    │   │   └── 子任務下拉選單
    │   │
    │   └── 2. 核心計時區塊
    │       ├── 當前任務標題顯示
    │       ├── 大字體計時器
    │       ├── 備註填寫欄
    │       ├── 閒置提醒
    │       └── 是否顯示秒數
    │  
    ├── Tab-pane 2: 任務列表 (Task List)
    │   ├── 1. 任務編輯
    │   │   ├── 管理主任務按鈕
    │   │   └── 新增子任務按鈕
    │   │
    │   │── 2. 匯出CSV按鈕
    │   │
    │   └── 3. 任務列表
    │       └── 主任務卡片
    │           ├── 標題、子任務完成度進度條、總累計時間
    │           ├── 操作按鈕 (編輯 / 刪除)
    │           └── 子任務明細列表
    │               ├── 標題、累計時間、狀態
    │               ├── 備註
    │               └── 操作按鈕 (編輯 / 刪除)
    │
    └── Tab-pane 3: 常見 Q&A (FAQ)
    │   │── Q1: 如何開始計時?
    │   │── Q2: 要如何新增子任務?
    │   └── Q3: 可以把資料下載下來嗎?
    │       
    │
    └── Tab-pane 4: 系統資料
        ├── 備份資料(JSON)
        └── 還元資料 (JSON)     

未來延伸:AI 時間預測

雖然不在這次30天鐵人賽挑戰的MVP範疇內,但如果能導入AI串接,根據歷史數據提供具參考性的「任務預估時間」,相信對使用者也是很有幫助,可以留作之後的迭代目標。


上一篇
DAY 01|為什麼我要為自己打造一款「學習任務計時器」?
下一篇
DAY 03|運用 Bootstrap 5 快速建構 Mockup:從資訊架構到元件選型
系列文
從 UI/UX 設計到前端實作:30 天打造專屬的任務學習計時器 共 31 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言